import 'package:flutter/services.dart';
import 'package:lighthouse/index.dart';

class MePage extends StatefulWidget {
  const MePage({Key? key}) : super(key: key);

  @override
  _MeState createState() => _MeState();
}

class _MeState extends State<MePage> {
  @override
  Widget build(BuildContext context) {
    var darkModel = Provider.of<DarkModel>(context);
    // TODO: implement build
    return GlobalStyle(
      child: BackgroundStyleWidget(
        child: Scaffold(
          backgroundColor: Colors.transparent,
          appBar: AppBar(
            title: Text(
              S.of(context).me,
            ),
            centerTitle: true,
            backgroundColor: Colors.transparent,
            systemOverlayStyle: darkModel.isDark(context)
                ? SystemUiOverlayStyle.light
                : SystemUiOverlayStyle.dark,
          ),
          floatingActionButton: !Global.isRelease
              ? IconButton(
                  icon: const Icon(Icons.bug_report),
                  onPressed: () =>
                      Navigator.pushNamed(context, "domainSettingsPage"),
                )
              : null,
          body: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              _buildHeader(), //构建抽屉菜单头部
              Expanded(child: _buildList()), //构建功能菜单
            ],
          ), // 构建主页面
        ),
      ),
    );
  }

  /// 头部
  Widget _buildHeader() {
    ThemeData theme = Theme.of(context);
    return Consumer<UserModel>(
      builder: (BuildContext context, UserModel value, Widget? child) {
        return Stack(
          children: [
            Container(
              width: double.infinity,
              padding: const EdgeInsets.only(top: 32, bottom: 32),
              child: Row(
                children: [
                  Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 10),
                      child: Stack(
                        children: [
                          ClipOval(
                            //如果已登录，则显示用户头像；若未登录，则显示默认头像
                            child: value.isLogin
                                ? gmAvatar(value.user?.avatar ?? "", width: 60)
                                : Image.asset("images/avatar-default.png",
                                    width: 60),
                          ),
                          Positioned(
                            top: 44,
                            left: 44,
                            child: Image.asset(
                                (value.user?.sex ?? "男") == "男"
                                    ? "images/me_man.png"
                                    : "images/me_woman.png",
                                width: 13),
                          )
                        ],
                      )),
                  Flexible(
                    child: Column(
                      children: [
                        Row(
                          crossAxisAlignment: CrossAxisAlignment.end,
                          children: [
                            Text(
                              value.user?.userName ?? "",
                              style: theme.textTheme.titleMedium?.copyWith(
                                  color: theme.colorScheme.onBackground),
                            ),
                            const SizedBox(width: 10),
                            Padding(
                              padding: EdgeInsets.fromLTRB(0, 0, 0, 2),
                              child: Text(
                                value.user?.phone ?? "",
                                style: theme.textTheme.labelMedium?.copyWith(
                                    color: theme.colorScheme.onSecondary),
                              ),
                            ),
                          ],
                        ),
                        const SizedBox(height: 10),
                        Row(
                          children: [
                            Image.asset('images/me_department.png',
                                width: 12, height: 12),
                            const SizedBox(width: 3),
                            Text(
                              value.user?.deptName ?? "",
                              style: theme.textTheme.labelMedium?.copyWith(
                                  color: theme.colorScheme.onSecondary),
                            ),
                            const SizedBox(width: 20),
                            Image.asset('images/me_position.png',
                                width: 12, height: 12),
                            const SizedBox(width: 3),
                            Text(
                              value.user?.postName ?? "",
                              style: theme.textTheme.labelMedium?.copyWith(
                                  color: theme.colorScheme.onSecondary),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        );
      },
    );
  }

  /// 构建菜单项
  Widget _buildList() {
    return Consumer<UserModel>(
        builder: (BuildContext context, UserModel userModel, Widget? child) {
      var s = S.of(context);
      return Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.transparent,
        child: ListView(
          children: [
            _buildMenu('me_reset_passwords', '重置密码', true, () {
              Navigator.pushNamed(context, "resetPasswordsPage");
            }),
            const SizedBox(height: 10),
            _buildMenu('me_setting', '其他设置', true, () {
              Navigator.pushNamed(context, "otherSettingsPage");
            }),
            // SizedBox(
            //   width: double.infinity,
            //   height: 1,
            //   child: DecoratedBox(
            //     decoration:
            //         BoxDecoration(color: Theme.of(context).colorScheme.surface),
            //   ),
            // ),
            // _buildMenu('me_feedback', '意见反馈', true, () {
            //   showToast('开发中');
            //   Navigator.pushNamed(context, "feedbackPage");
            // }),
            // _buildMenu('me_feedback', '筛选', true, () {
            //   Navigator.pushNamed(context, "screen");
            // }),
            const SizedBox(height: 10),
            _buildMenu('me_log_out', '退出登录', false, () {
              showDialog(
                context: context,
                builder: (ctx) {
                  //退出账号前先弹二次确认窗
                  return GlobalStyle(
                      child: AlertDialog(
                    content: Text(
                      s.logoutTip,
                    ),
                    actions: <Widget>[
                      TextButton(
                        child: Text(
                          s.cancel,
                        ),
                        onPressed: () => Navigator.pop(context),
                      ),
                      TextButton(
                        child: Text(
                          s.yes,
                        ),
                        onPressed: () {
                          //该赋值语句会触发MaterialApp rebuild
                          userModel.user = null;
                          DataCache.clearData();

                          Navigator.pop(context);
                          Navigator.pushReplacementNamed(context, "login");
                          // Navigator.pop(context);
                        },
                      ),
                    ],
                  ));
                },
              );
            }),
          ],
        ),
      );
    });
  }

  /// leftIoc 左侧图标
  /// label 标题
  /// rightIoc 是否显示右侧图标
  /// fu 点击回调
  Widget _buildMenu(leftIoc, label, rightIoc, fu) {
    return GestureDetector(
      onTap: fu,
      child: Container(
        width: double.infinity,
        padding: const EdgeInsets.fromLTRB(17, 20, 17, 20),
        decoration: BoxDecoration(
          color: Theme.of(context).colorScheme.background,
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Row(
              children: [
                Image.asset(
                  'images/$leftIoc.png',
                  width: 17,
                  height: 17,
                ),
                const SizedBox(width: 10),
                Text(
                  label,
                  style: const TextStyle(fontSize: 16),
                )
              ],
            ),
            rightIoc
                ? Image.asset(
                    'images/common_right.png',
                    width: 17,
                    height: 17,
                  )
                : const SizedBox(width: 10),
          ],
        ),
      ),
    );
  }
}
